<template>
	<div class="acticeAlert">
		<h3>alert 警告</h3>
		<div class="alert1">
			<h4>基础用法</h4>
			<el-row :gutter="20">
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="success" title="成功提示的方案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="info" title="消息提示的方案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="warning" title="警告提示的文案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="error" title="错误提示的文案"></el-alert>
				</el-col>
			</el-row>
		</div>
		<div class="alert2">
			<h4>自定义关闭按钮</h4>
			<el-row :gutter="20">
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="success" closable title="成功提示的方案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="info" closable title="消息提示的方案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="warning" closable title="警告提示的文案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="error" closable title="错误提示的文案"></el-alert>
				</el-col>
			</el-row>
		</div>
		<div class="alert3">
			<h4>带有icon</h4>
			<el-row :gutter="20">
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="success" show-icon closable title="成功提示的方案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="info" show-icon closable title="消息提示的方案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="warning" show-icon closable title="警告提示的文案"></el-alert>
				</el-col>
				<el-col :span="12" style="margin:10px 0">
					<el-alert type="error" show-icon closable title="错误提示的文案"></el-alert>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
</script>

<style>

</style>